<template>
	<view class="main">
		<view class="hand">
			<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//dbleft.png" @click="blackbtn"></image>
			设备统计
		</view>
		<view class="show">
			<view class="sone">
				<view class="sonetap">
					<view class="stapleft">
						<view class="staplefts">{{list.projectTotal}}</view>
						<view class="stapleftx">项目总数(个)</view>
					</view>
					<view class="stapleft">
						<view class="staplefts">{{list.hostTotal}}</view>
						<view class="stapleftx">从机个数(个)</view>
					</view>
				</view>
			</view>
			<view class="stwo">
				<view class="stwotap" v-for="(item, index) in list.list" :key="index">
					<view class="stwoleft">
						<view class="stwolefts">{{item.projectName}}</view>
					</view>
					<view class="stwoleftx">从机个数{{item.equCount}}个</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		components: {},
		mounted() {
			
		},

		data() {
			return {
				list:{},//列表数据
			}
		},
		onLoad() {
			this.show()
		},
		methods: {
			//设备统计
			show(){
				uni.showLoading({
					title: '加载中...'
				})
				this.$base.request1('manager/statistic/equipment', 'GET')
					.then(res => {
						uni.hideLoading()
						this.list=res.data.data
					})
					.catch(err => {
				
					})
			},
			//返回上一页
			blackbtn() {
				uni.navigateBack()
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		overflow-x: hidden;
		.hand{
			width: 100%;
			background-color: #4B98ED;
			height: 62upx;
			font-size: 30upx;
			font-family: PingFang SC Bold, PingFang SC Bold-Bold;
			font-weight: 700;
			text-align: center;
			line-height: 62upx;
			color: #ffffff;
			position: relative;
			image{
				width:22upx;
				height: 39upx;
				position: absolute;
				left: 31upx;
				top: 11upx;
			}
		}
		.show{
			 width: 100%;
			 box-sizing: border-box;
			.sone{
				width: 100%;
				height: 253upx;
				background-color: #4B98ED;
				position: relative;
				.sonetap{
					width: 686upx;
					height: 205upx;
					border-radius: 16upx 16upx 0upx 0upx;
					box-shadow: 0upx 0upx 9upx 0upx rgba(66,66,66,0.17); 
					background-color: #FFFFFF;
					position: absolute;
					bottom: 0upx;
					left: 50%;
					margin-left: -343upx;
					display: flex;
					justify-content: space-between;
					padding: 55upx 0upx 29upx 0upx;
					box-sizing: border-box;
					.stapleft{
						width: 50%;
						border-right: 2upx solid #999999;
						.staplefts{
							font-size: 48upx;
							font-family: Arial Bold, Arial Bold-Bold;
							font-weight: 700;
							text-align: center;
							color: #4b98ed;
						}
						.stapleftx{
							font-size: 28upx;
							font-family: PingFang SC Medium, PingFang SC Medium-Medium;
							font-weight: 500;
							text-align: center;
							color: #333333;
						}
					}
					
				}
			}
			.stwo{
				width: 100%;
				box-sizing: border-box;
				padding: 25upx 32upx;
				.stwotap{
					width: 686upx;
					border: 1upx solid #eaeaea;
					display: flex;
					justify-content: space-between;
					box-sizing: border-box;
					padding: 32upx 23upx;
					align-items: center;
					.stwoleft{
						.stwolefts{
							font-size: 28upx;
							font-family: PingFang SC Bold, PingFang SC Bold-Bold;
							font-weight: 700;
							color: #333333;
							margin-bottom: 10upx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							width: 500upx;
						}
						
					}
					.stwoleftx{
						font-size: 24upx;
						font-family: PingFang SC Medium, PingFang SC Medium-Medium;
						font-weight: 500;
						color: #666666;
					}
				}
			}
		}
		
	}
</style>
